<ng-container
  *ngIf="buffDatas.length !== 0 || dmgDatas.length !== 0 || healingDatas.length !== 0 || shieldDatas.length !== 0 || productDatas.length !== 0"
>
  <ng-content></ng-content>
</ng-container>
<div
  *ngIf="dmgTempDataList.length > 0 && extraInfoStatus"
  [class]="{
    'normal-group': !isFromInfo
  }"
>
  <div
    [class]="{
      'show-hide-multi-switch': true,
      'with-inner-margin': isFromInfo
    }"
    *ngIf="dmgTempDataList.length > 1 && dmgDatas[0]['forceDisplay'] === undefined"
  >
    <button
      mat-icon-button
      class="toogle-btn"
      [disableRipple]="true"
      (click)="expandToggleStatus = !expandToggleStatus"
    >
      <mat-icon class="material-icons-outlined menu-icon">menu</mat-icon>
    </button>
  </div>
  <div
    [@extraDataChangeRow]
    [@extraDataChangeCol]
    [class]="{
      'show-hide-wrapper': true,
      'show-hide-wrapper-multi': dmgTempDataList.length > 1,
      'with-inner-margin': isFromInfo,
      'with-inner-margin-multi': isFromInfo && dmgTempDataList.length > 1
    }"
    *ngIf="dmgTempDataList.length === 1 || expandToggleStatus"
  >
    <ng-container *ngFor="let temp of dmgTempDataList; index as i">
      <div
        class="show-hide-switch"
        *ngIf="dmgDatas[i]['forceDisplay'] === undefined && dmgDatas[i]['originIndex'] !== undefined"
      >
        <button
          mat-icon-button
          class="toogle-btn"
          [disableRipple]="true"
          (click)="changeDisplayStatus(dmgDatas[i]['originIndex'], !extraInfoStatus[$any(dmgDatas[i]['originIndex'])])"
        >
          <mat-icon
            [@showChange]
            class="material-icons-outlined"
            *ngIf="extraInfoStatus[$any(dmgDatas[i]['originIndex'])]"
            [fontIcon]="'keyboard_arrow_up'"
          ></mat-icon>
          <mat-icon
            [@showChange]
            class="material-icons-outlined"
            *ngIf="!extraInfoStatus[$any(dmgDatas[i]['originIndex'])]"
            [fontIcon]="'keyboard_arrow_down'"
          ></mat-icon>
        </button>
      </div>
    </ng-container>
  </div>
  <div *ngIf="!isFromInfo && dmgDatas[0]['forceDisplay'] === undefined" class="auto-grow-space">
    <div></div>
  </div>
</div>
<ng-container *ngFor="let temp of buffTempDataList; index as i; first as isFirst">
  <div class="no-scroll-div">
    <table>
      <!-- バフ -->
      <tr>
        <td>
          <span
            class="buff-title"
            [innerText]="(buffDatas[i].title!?buffDatas[i].title!:(buffDatas[i].isAllTeam!?'GENSHIN.OTHER.TEAM_BUFF':(buffDatas[i].isOnlyForOther!?'GENSHIN.OTHER.ONLY_OTHER_BUFF':'GENSHIN.OTHER.BUFF'))) | translate"
            [matTooltip]="buffDatas[i].desc!?(buffDatas[i].desc! | translate):undefined"
            matTooltipPosition="above"
          ></span>
          <mat-icon *ngIf="buffDatas[i].desc!" class="icon material-icons-outlined">info</mat-icon>
        </td>
        <ng-container
          *ngIf="buffDatas[i].type! === 'switch'; then switch else slider"
        ></ng-container>
        <ng-template #switch>
          <td>
            <mat-slide-toggle
              class="switch-buff"
              color="primary"
              [checked]="buffDatas[i].switchValue!"
              (change)="onChangeSwitch($event, buffDatas[i].valueIndex!)"
            >
            </mat-slide-toggle>
          </td>
        </ng-template>
        <ng-template #slider>
          <td>
            <mat-form-field appearance="legacy" class="slider-buff-input-field">
              <input
                type="number"
                matInput
                title=""
                [step]="buffDatas[i].step!"
                [value]="buffDatas[i].sliderValue!"
                (change)="onChangeSliderValue($event, buffDatas[i].valueIndex!, i, buffDatas[i].min!, buffDatas[i].max!)"
              />
              <span matSuffix *ngIf="buffDatas[i].sliderIsPercent">%</span>
            </mat-form-field>
          </td>
        </ng-template>
      </tr>
      <ng-container *ngIf="buffDatas[i].type! === 'slider'">
        <tr>
          <td colspan="2">
            <mat-slider
              class="slider-buff"
              color="primary"
              [min]="buffDatas[i].min!"
              [max]="buffDatas[i].max!"
              [step]="buffDatas[i].step!"
              [thumbLabel]="true"
              tickInterval="auto"
              [value]="buffDatas[i].sliderValue!"
              (change)="onChangeSlider($event, buffDatas[i].valueIndex!, i)"
            >
            </mat-slider>
          </td>
        </tr>
      </ng-container>
    </table>
  </div>
</ng-container>
<ng-container *ngFor="let temp of dmgTempDataList; index as i">
  <div
    echarts
    *ngIf="showDamageEchartsFlag && currentDamageIndex === i"
    [options]="damageCalcProcessEchartsOption"
    [loading]="commonEchartsLoading"
    class="calc-process-echarts"
  ></div>
  <div
    echarts
    *ngIf="showDamageEchartsFlag && currentDamageIndex === i"
    [options]="damageEchartsOption"
    [loading]="commonEchartsLoading"
    class="common-echarts"
  ></div>
  <div
    class="no-scroll-div clickable"
    [@extraDataChangeCol]
    (@extraDataChangeCol.done)="updateRelayout('+/-')"
    *ngIf="extraInfoStatus === undefined || dmgDatas[i]['originIndex'] !== undefined && extraInfoStatus && extraInfoStatus[$any(dmgDatas[i]['originIndex'])]"
  >
    <table>
      <!-- ダメージ -->
      <ng-container *ngFor="let prop of dmgPropList">
        <tr
          *ngIf="dmgDatas[i][prop]"
          [style.background]="specialColorMap[prop] ?? dmgColors[i]"
          (click)="showEcharts(prop, i, 'damage')"
        >
          <td>
            <div class="damage-type-container">
              <mat-icon
                *ngIf="!notAddToDPSPropList.includes(prop)"
                class="dps-add-icon material-icons-outlined"
                (click)="addToDPS(prop, i);$event.stopPropagation()"
                >playlist_add</mat-icon
              >
              <span [innerText]="'GENSHIN.DMG.'+propNameMap[prop] | translate"></span>
            </div>
          </td>
          <td>
            <span
              [innerText]="dmgDatas[i][prop] | truncate"
              [matTooltip]="dmgDatas[i][prop] + ''"
              matTooltipPosition="right"
            ></span>
          </td>
        </tr>
      </ng-container>
    </table>
    <!-- <mat-button-toggle-group
      *ngIf="dmgDatas[i]['forceDisplay'] === undefined && dmgDatas[i]['originIndex'] !== undefined && extraInfoStatus"
      class="hide-btn"
      name="fontStyle"
      aria-label="Font Style"
    >
      <mat-button-toggle
        class="toogle-btn"
        [disabled]="extraInfoStatus[$any(dmgDatas[i]['originIndex'])]"
        (click)="changeDisplayStatus(dmgDatas[i]['originIndex'], true)"
      >
        <mat-icon class="material-icons-outlined">control_point</mat-icon>
      </mat-button-toggle>
      <mat-button-toggle
        class="toogle-btn"
        [disabled]="!extraInfoStatus[$any(dmgDatas[i]['originIndex'])]"
        (click)="changeDisplayStatus(dmgDatas[i]['originIndex'], false)"
      >
        <mat-icon class="material-icons-outlined">do_not_disturb_on</mat-icon>
      </mat-button-toggle>
    </mat-button-toggle-group> -->
  </div>
</ng-container>
<ng-container *ngFor="let temp of healingTempDataList; index as i">
  <div
    echarts
    *ngIf="showHealingEchartsFlag && currentHealingIndex === i"
    [options]="healingCalcProcessEchartsOption"
    [loading]="commonEchartsLoading"
    class="calc-process-echarts"
  ></div>
  <div
    echarts
    *ngIf="showHealingEchartsFlag && currentHealingIndex === i"
    [options]="healingEchartsOption"
    [loading]="commonEchartsLoading"
    class="common-echarts"
  ></div>
  <div class="no-scroll-div clickable">
    <table>
      <!-- 治療 -->
      <ng-container *ngFor="let prop of healingPropList">
        <tr
          *ngIf="healingDatas[i][prop]"
          [style.background]="specialColorMap[prop]"
          (click)="showEcharts(prop, i, 'healing')"
        >
          <td>
            <span [innerText]="'GENSHIN.OTHER.'+propNameMap[prop] | translate"></span>
          </td>
          <td>
            <span
              [innerText]="healingDatas[i][prop] | truncate"
              [matTooltip]="healingDatas[i][prop] + ''"
              matTooltipPosition="right"
            ></span>
            <br />
          </td>
        </tr>
      </ng-container>
    </table>
  </div>
</ng-container>
<ng-container *ngFor="let temp of productTempDataList; index as i">
  <div
    echarts
    *ngIf="showProductEchartsFlag && currentProductIndex === i"
    [options]="productCalcProcessEchartsOption"
    [loading]="commonEchartsLoading"
    class="calc-process-echarts"
  ></div>
  <div
    echarts
    *ngIf="showProductEchartsFlag && currentProductIndex === i"
    [options]="productEchartsOption"
    [loading]="commonEchartsLoading"
    class="common-echarts"
  ></div>
  <div class="no-scroll-div clickable">
    <table>
      <!-- 生成物 -->
      <ng-container *ngFor="let prop of productPropList">
        <tr
          *ngIf="productDatas[i][prop]"
          [style.background]="specialColorMap[prop]"
          (click)="showEcharts(prop, i, 'product')"
        >
          <td>
            <span [innerText]="'GENSHIN.OTHER.'+propNameMap[prop] | translate"></span>
          </td>
          <td>
            <span
              [innerText]="productDatas[i][prop] | truncate"
              [matTooltip]="productDatas[i][prop] + ''"
              matTooltipPosition="right"
            ></span>
            <br />
          </td>
        </tr>
      </ng-container>
    </table>
  </div>
</ng-container>
<ng-container *ngFor="let temp of shieldTempDataList; index as i">
  <div
    echarts
    *ngIf="showShieldEchartsFlag && currentShieldIndex === i"
    [options]="shieldCalcProcessEchartsOption"
    [loading]="commonEchartsLoading"
    class="calc-process-echarts"
  ></div>
  <div
    echarts
    *ngIf="showShieldEchartsFlag && currentShieldIndex === i"
    [options]="shieldEchartsOption"
    [loading]="commonEchartsLoading"
    class="common-echarts"
  ></div>
  <div class="no-scroll-div clickable">
    <table>
      <!-- バリア -->
      <ng-container *ngFor="let prop of shieldPropList">
        <tr
          *ngIf="shieldDatas[i][prop]"
          [style.background]="specialColorMap[prop]"
          (click)="showEcharts(prop, i, 'shield')"
        >
          <td>
            <span [innerText]="'GENSHIN.OTHER.'+propNameMap[prop] | translate"></span>
          </td>
          <td>
            <span
              [innerText]="shieldDatas[i][prop] | truncate"
              [matTooltip]="shieldDatas[i][prop] + ''"
              matTooltipPosition="right"
            ></span>
            <br />
          </td>
        </tr>
      </ng-container>
    </table>
  </div>
</ng-container>
